<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('每日跟进')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <div class="ibox-title">
                <h3>[[${project.projectName}]]</h3>
            </div>
            <form id="ordinary-form">
                <div class="select-list">
                    <ul>
                        <li>
                            <a class="btn btn-success btn-navigate btn-sm" onclick="query('W')">本周</a>
                            <a id="test" class="btn btn-navigate btn-sm" onclick="query('M')">本月</a>
                            <a class="btn btn-navigate btn-sm" onclick="query('LM')">上月</a>
                            <a class="btn btn-navigate btn-sm" onclick="query('S')">本季度</a>
                            <a class="btn btn-navigate btn-sm" onclick="query('Y')">本年度</a>
                            <a class="btn btn-navigate btn-sm" onclick="query('A')">全部</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var prefix = ctx + "manage/approveLog";
    var projectId = [[${project.projectId}]];

    function query(period) {
        $("#bootstrap-table").bootstrapTable('destroy');
        var options = {
            url: prefix + "/searchLog/" + projectId + "/" + period,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            columns: [
                {
                    field : 'entityType',
                    title : '项目动态',
                    formatter: function(value, item, index) {
                        if (item.entityType == '5') {
                            return '<span class="badge badge-success">每日动态</span>';
                        } else {
                            return '<span class="badge badge-warning">事项动态</span>';
                        }
                    }
                },
                {
                    field : 'approveComment',
                    title : ''
                },
                {
                    field : 'fileList',
                    title : '图片',
                    formatter: function(fileList, item, index) {
                        var result = '';
                        for(var i=0; i < fileList.length; i++) {
                            if (fileList[i].filePath) {
                                result = result + '<img id="img'+fileList[i].projectFileId+'" class="img-circle img-xs" src="' + fileList[i].filePath +'" onclick="showFiles(\'' + fileList[i].fileName +'\',\'' + fileList[i].oriFileName +'\',\'' + fileList[i].filePath +'\')"/><i id="imgi'+fileList[i].projectFileId+'" class="fa fa-times-circle" style="vertical-align:top" onclick="deleteFile('+ fileList[i].projectFileId +')"></i>';
                            }
                        }
                        return result;
                    }
                },
                {
                    field : 'createTime',
                    title : '更新时间'
                },
                {
                    field : 'updateBy',
                    title : '责任人'
                }]
        };
        $.table.init(options);
    }

    query('W');

    $("#ordinary-form a").click(function() {
        $("#ordinary-form a").removeClass("btn-success");
        $(this).addClass("btn-success");
        return false;
    });

    function showFiles(fileName, oriFileName, filePath) {
        // 弹窗预览文件
        // 根据fileName判断文件类型，初始化不同的预览插件进行文件的预览
        // 经过查看RuoYi文档，及源码。选定使用layer的原生实现
        var fileNameArr = fileName.split('.');
        var suffixLowercase = fileNameArr[fileNameArr.length-1].toLowerCase();
        var imageTypes = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
        var pdfTypes = ['pdf'];
        // 如果是图片
        if(imageTypes.indexOf(suffixLowercase) > -1) {
            layer.open({
                type: 1,
                title: [
                    '图片预览',
                    'background-color: #CCCCCC; color:#000000;margin:0;text-align: left;'
                ],
                anim: 'up',
                area: ['70%', '650px'], //宽高
                content: '<img src="" style="max-width: 100%;clear: both;display: block;margin: auto" id="imgElement" />',
                success: function (elem) {
                    $(elem).find('#imgElement').attr('src', filePath);
                }
            });
        }
        // 如果是pdf
        else if(pdfTypes.indexOf(suffixLowercase) > -1) {
            layer.open({
                type: 1,
                title: [
                    'PDF预览',
                    'background-color: #CCCCCC; color:#000000;margin:0;text-align: left;'
                ],
                anim: 'up',
                area: ['70%', '650px'], //宽高
                content: '<iframe src="" width="100%" height="100%" style="border: none;width:100%;height:100%;" id="pdfContainer"></iframe>',
                success: function (elem) {
                    var pdfmodule = '/js/plugins/pdfjs-2.7.570-es5-dist/web/viewer.html';
                    $(elem).find('#pdfContainer').attr('src', pdfmodule+'?file='+filePath);
                }
            });
        }
            // 其他，后续可以支持，比如视频、音乐
        // TODO 封装方法
        else {
            $.modal.msgError(suffixLowercase + " 类型暂不支持预览，请点击下载按钮进行预览");
        }

    }

    function deleteFile(id) {
        $.modal.confirm("确认要删除该附件吗?", function() {
            var url = ctx + "manage/file/remove";
            var data = { "ids": id };
            $.operate.submit(url, "post", "json", data, function () {
                $("#img" + id).remove();
                $("#imgi" + id).remove();
            });
        });
    }
</script>
</body>
</html>